<template>
  <view v-if="loginFlag" class="answer flex flex-col">
    <image class="answer-bg" src="https://app5.shuguostar.cn/imgs/images/answer/bg.png" />
    <NavigationBar :navigation-title="bookName" />
    <view class="answer-content flex-1 transition">
      <view class="answer-progrss item-center flex">
        <view class="progress" :style="{ width: `${(666 / total) * (questionIndex)}rpx` }" />
        <text class="text">
          {{ `${questionIndex}/${total}` }}
        </text>
      </view>

      <ChooseItem ref="chooseItemRef" :question="question" :show-answer="showAnswer" @set-answer="setAnswer" />
    </view>

    <view class="answer-btn">
      <text class="btn-text" @click="handleSumbit">
        下一题
      </text>
    </view>

    <up-overlay :show="showOverlay" :opacity="0.8">
      <view class="finish-warp flex flex-col items-center">
        <image class="finish-text" src="https://app5.shuguostar.cn/imgs/images/answer/text.png" />
        <image class="finish-bg" src="https://app5.shuguostar.cn/imgs/images/answer/icon_bg.png" />
        <image class="finish-ip" src="https://app5.shuguostar.cn/imgs/images/answer/IP_1.png" />

        <view class="finish-content">
          <text class="text">
            正确率<text class="big-text">
              {{ Number(answerResult?.resultRate) * 100 }}
            </text>%
          </text>
        </view>

        <image class="close-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_close.png" @click="closeOverlay" />
      </view>
    </up-overlay>
  </view>

  <template v-else>
    <NavigationBar :navigation-title="bookName" />
    <NoDataPage :status="1" />
  </template>
</template>

<script setup lang="ts">
import ChooseItem from './components/chooseItem.vue';
import { getExerciseList, saveExercises } from '@/api/read';
import type { Exercise, ExerciseListResult, GetSubmitAnwserResult, ListResult, Question } from '@/api/read/type';
import { useUserStore } from '@/store';
import { isLogin } from '@/utils/auth';

const userStore = useUserStore();
const loginFlag = ref<boolean>(isLogin());

const showContent = ref<boolean>(false);
const showAnswer = ref<boolean>(false);

const total = ref<number>(0);
const questionIndex = ref<number>(0);
const questionList = ref<Array<Question>>([]);
const question = ref<Question>();
const exercise = ref<Exercise | null>();

const showOverlay = ref<boolean>(false);
const bookName = ref<string>('');
const bookIsbn = ref<string>('');
const bookId = ref<string>('');
const acsId = ref<string>('');
const schoolId = ref<string>('');
const classId = ref<string>('');
const classCourseId = ref<string>('');
const coursePkg = ref<string>('');

const start = () => {
  if (questionIndex.value + 1 > total.value) {
    return;
  }
  question.value = questionList.value[questionIndex.value];
  if (question.value.bigPic) {
    nextTick(() => {
      showContent.value = false;
    });
  }

  questionIndex.value++;
};

const getData = (bookIsbn: string) => {
  getExerciseList({ bookIsbn, bookId: bookId.value, classId: classId.value, bookName: bookName.value, packageName: coursePkg.value }).then((res: ExerciseListResult) => {
    exercise.value = res.exercise;
    questionList.value = res.questionList;
    total.value = res.questionList.length;
    start();
  });
};

const answerResult = ref<GetSubmitAnwserResult>();
const answerStr = ref<string>('');

const setAnswer = (answer: string) => {
  answerStr.value = answer;
};

const saveData = () => {
  const data: ListResult = {
    exercise: exercise.value!,
    questionList: questionList.value,
  };
  data.exercise.classId = classId.value;
  data.exercise.classCourseId = classCourseId.value;
  data.exercise.schoolId = schoolId.value;
  saveExercises(data).then((res) => {
    uni.navigateTo({
      url: `/pages/views/answer/end?books=${res.readBooks}&fonts=${res.readBooksFonts}&startDate=${res.bookStartTime}&bookName=${res.bookName}&successRate=${res.successRate}`,
    });
  });
};

const chooseItemRef = ref<InstanceType<typeof ChooseItem> | null>(null);
const handleSumbit = () => {
  chooseItemRef.value?.pauseAudio();
  question.value!.questionStem.userAnswer = answerStr.value;
  showAnswer.value = true;

  setTimeout(() => {
    if (questionIndex.value >= total.value) {
      saveData();
    }
    else {
      start();
    }
    showAnswer.value = false;
  }, 1000);
};

const closeOverlay = () => {
  showOverlay.value = false;
  uni.navigateBack();
};

onLoad((option: any) => {
  if (!loginFlag.value)
    return;
  bookName.value = option.bookName;
  bookIsbn.value = option.bookIsbn;
  bookId.value = option.bookId;
  acsId.value = option.acsId;
  schoolId.value = option.schoolId;
  classId.value = option.classId;
  classCourseId.value = option.classCourseId;
  coursePkg.value = option.coursePkg;
  getData(option.bookIsbn);
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: userStore.share_txt,
    imageUrl: userStore.share_pic_url,
  };
});
</script>

<style lang="scss" scoped>
.answer {
  position: relative;
  min-height: 100%;
  padding-top: 188rpx;
  background: linear-gradient( 184deg, #17D794 0%, #B6EDBC 100%);

  .all-bg {
    position: absolute;
    top: 0;
    height: 100%;
    width: 750rpx;
  }

  .answer-bg {
    position: absolute;
    top: 110rpx;
    left: 36rpx;
    width: 666rpx;
    height: 124rpx;
  }

  .answer-content {
    height: 100%;
    padding: 40rpx;
    overflow: auto;

    .answer-progrss {
      position: relative;
      width: 100%;
      height: 48rpx;
      background: rgba(0,0,0,0.5);
      border-radius: 24rpx;
      border: 2rpx solid rgba(255,255,255,0.08);
      overflow: hidden;

      .progress {
        height: 100%;
        background: #FFB829;
        border-radius: 20rpx;
      }

      .text {
        position: absolute;
        top: 0;
        right: 32rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #fff;
      }
    }
  }

  .answer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 40rpx 50rpx 40rpx;
    background: #fff;
    z-index: 3;

    .btn-text {
      display: block;
      font-size: 32rpx;
      line-height: 92rpx;
      text-align: center;
      background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
      color: #fff;
      border-radius: 46rpx;
    }
  }

  .finish-warp {
    position: relative;

    .finish-text {
      position: relative;
      width: 384rpx;
      height: 64rpx;
      z-index: 1;
    }

    .finish-bg {
      position: absolute;
      top: 40rpx;
      width: 540rpx;
      height: 380rpx;
    }

    .finish-ip {
      position: absolute;
      top: 108rpx;
      width: 200rpx;
      height: 240rpx;
    }

    .finish-content {
      position: relative;
      padding-top: 304rpx;
      z-index: 3;

      .text {
        display: block;
        font-size: 28rpx;
        line-height: 56rpx;
        color: #FFFDF2;

        .big-text {
          font-size: 40rpx;
          color: #FFF8D9;
        }
      }
    }

    .close-icon {
      margin-top: 64rpx;
      width: 64rpx;
      height: 64rpx;
    }
  }
}

:deep(.u-fade-enter-to) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
